<template>
	<div class="math-formula-item" :class="[{'acitve': index === currentIndex}, result ? 'result-bg-success' : 'result-bg-error']" @click="selectFormuls">
		<div class="order-number" v-if="showIndex">{{ index + 1 }}.</div>
		<!--算式-->
		<template v-if="type === 'formula'">
			<div class="item formula-item" v-for="(item, index) in data.formula" :key="index">
				<div v-if="item === null" class="placeholder">{{ data.input  }}</div>
				<span v-else>{{ item }}</span>
			</div>
		</template>
		<!--比大小-->
		<div v-if="type === 'war'" class="war-list">
			<span>{{ data.start }}</span>
			<div class="placeholder">{{ data.input }}</div>
			<span >{{ data.end }}</span>
		</div>
		<!--分与合-->
		<div v-if="type === 'open_close'" class="open-close-list">
			<div>
				<div class="placeholder">{{ data.merge ? data.input : data.formula[data.formula.length - 1] }}</div>
			</div>
			<div>
				<div class="placeholder">{{ data.formula[0] === null ? data.input : data.formula[0]}}</div>
				<div class="placeholder">{{ data.formula[2] === null ? data.input : data.formula[2]}}</div>
			</div>
		</div>
		<!--认时钟-->
		<div v-if="type === 'clock'" class="clock-list">
			<div class="clock-item" :style="'background-image: url('+Base64.clock+')'">
				<div class="clock-hour" :style="`transform: rotate(${data.Angles.hourAngle}deg)`"></div>
				<div class="clock-minute" :style="`transform: rotate(${data.Angles.minuteAngle}deg)`"></div>
				<div class="clock-point"></div>
			</div>
			<div class="clock-input">
				<div class="placeholder">
					<div class="input">{{ data.input }}</div>
				</div>
			</div>
		</div>
		<div v-if="showResult && data.showResult" class="math-formula-result iconfont" :class="result ? 'icon-dadui color-primary' : 'icon-dacuo color-error'"></div>
	</div>
</template>

<script setup>
import { computed } from 'vue';
import Base64 from "./base64Img"
const props = defineProps({
	data: {
		type: Object,
		default: () => ({})
	},
	type: {
		type: String,
		default: ''
	},
	index: {
		type: [String, Number],
		default: 0
	},
	currentIndex: {
		type: [String, Number],
		default: ''
	},
	disabled: Boolean,
	showIndex: {
		type: Boolean,
		default: true
	},
	showResult: {
		type: Boolean,
		default: true
	},
})
const emit = defineEmits(['select'])
const selectFormuls = (index) => {
	emit('select', props.index)
}
const result = computed(() => !!props.data.validate)
const isDisabled = computed(() => props.disabled)
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";
.math-formula-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.6rem 0 1.6rem 0;
	border-bottom: 1px solid $gray-ligh-6;
	position: relative;
	&.is-correct {
		background-color: #fff6f6;
	}
	&.acitve {
		background-color: $gray-ligh-7;
		.placeholder {
			border-color: $primary;
		}
	}
	.order-number {
		color: $gray-ligh-4;
		font-size: 1.2rem;
		line-height: 1;
		padding-right: 0.6rem;
		font-family: "Alimama";
	}
	.item {
		text-align: center;
		padding: 0 0.3rem;
	}
	.formula-item {
		display: flex;
		align-items: center;
		height: 2.4rem;
		.placeholder {
			transform: translateY(0.4rem);
			line-height: 0.5;
			align-items: flex-start;
		}
	}
	span {
		font-family: "Alimama";
		font-size: 1.6rem;
		line-height: 1;
		font-weight: bold;
	}
	.placeholder {
		width: 100%;
		text-align: center;
		border: 0.2rem solid $gray-ligh-4;
		border-radius: 0.4rem;
		height: 2.4rem;
		width: 3.5rem;
		box-sizing: border-box;
		font-size: 1.5rem;
		font-family: "Alimama";
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		overflow: hidden;
		background-color: #fff;
		span {
			display: block;
			line-height: 1.2rem;
			height: 2.4rem;
		}
		.input{
			display: block;
			line-height: 1.6rem;
			height: 2.4rem;
		}
	}
	.math-formula-result {
		margin-left: 0.4rem;
		font-size: 1.4rem;
	}
}
.war-list {
	display: flex;
	align-items: center;
	span {
		height: 3rem;
		display: flex;
		align-items: center;
		transform: translateY(-0.4rem);
	}
	.placeholder {
		margin: 0 0.6rem;
		border-radius: 5rem;
		height: 3rem;
		width: 3rem;
		line-height: 1;
		align-items: flex-start;
	}
}
.open-close-list {
	position: relative;
	padding: 1.6rem 0;
	> div {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.placeholder {
		margin: 0 1.2rem;
		height: 3rem;
		width: 3rem;
		line-height: 1;
		align-items: flex-start;
	}
	>div:first-child {
		&::before, &::after {
			content: "";
			position: absolute;
			left: 50%;
			border-left: 1px solid #ccc;
			top: 123%;
    		bottom: -3.2rem;
		}
		&::before {
			transform: rotate(45deg) translateX(-1.2rem);
		}
		&::after {
			transform: rotate(-45deg) translateX(1.2rem);
		}
	}
	>div:last-child {
		margin-top: 2.4rem
	}
}
.clock-list {
	position: relative;
	.clock-item {
		position: relative;
		width: 13rem;
		height: 13rem;
		background-size: cover;
		// background-image: url(https://file.web-jshtml.cn/uploads/times/mathematics/images/clock.png);
		background-repeat: no-repeat;
		.clock-hour, .clock-minute {
			position: absolute;
			left: 50%;
			bottom: 50%;
			width: 0.2rem;
			background-color: #000;
			margin-left: -0.1rem;
			transform-origin: bottom;
			&::before {
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				bottom: 100%;
				left: 50%;
				transform: translateX(-50%);
				border-bottom: 0.5rem solid #000;
				border-left: 0.5rem solid transparent;
				border-right: 0.5rem solid transparent;
			}
		}
	}
	.hour-mode {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 1rem;
	}
	.clock-input {
		padding-top: 1.2rem;
		.placeholder {
			width: 7rem;
			margin: auto;
			display: flex;
			align-items: center;
			
			> div {
				width: 4rem;
			}
		}
	}
	.clock-hour {
		height: 15%
	}
	.clock-minute {
		height: 29%;
	}
	.clock-point {
		position: absolute;
		width: 0.8rem;
		height: 0.8rem;
		background-color: #000;
		left: 50%;
		top: 50%;
		margin: -0.4rem 0 0 -0.4rem;
		border-radius: 1rem;
	}
}
</style>